<template>
    <div class="nav">
        <div class="tab-item">
            <router-link to="/" class="active">推荐</router-link>
        </div>
        <div class="tab-item">
            <router-link to="/commodity/2">手机</router-link>
        </div>
        <div class="tab-item">
            <router-link to="/commodity/3">配件</router-link>
        </div>
        <div class="tab-item">
            <router-link to="/commodity/4">影音</router-link>
        </div>
        <div class="tab-item">
            <router-link to="/commodity/5">智能数码</router-link>
        </div>
        <div class="tab-item">
            <router-link to="/commodity/6">居家生活</router-link>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Nav'
}
</script>
<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .nav
        position: fixed
        display: flex
        justify-content: space-between
        width: 100%
        height: 0.6rem
        line-height: 0.6rem
        padding:0 0.3rem
        top: .91rem
        box-sizing: border-box 
        background: $topBgColor
        z-index: 99999
        .tab-item
            a
                text-decoration:none
                display: block
                color: #000
                font-size: 14px
                &.active
                    border-bottom: 1px solid #0BBBEF
                    color: #0BBBEF
  
</style>


